<script setup>
import { getProductionGdjd, getProductionBgjd, getProductionGdzt } from '@/api/visual/productionBoard.js'
import { formatMoney } from '@/utils/globalMethod'

const gdjdData = ref([])
const bgjdData = ref([])
const gdztData = ref([])
const key = ref(1)

const color = ref(['#fff', '#F56C6C', '#409EFF', '#409EFF', '#67C23A'])

const loadGdjd = async () => {
  const { data } = await getProductionGdjd()
  gdjdData.value = data
}

const loadBgjd = async () => {
  const { data } = await getProductionBgjd()
  bgjdData.value = data.map(item => {
    if (item.db === '今日不良品率') item.Quantity = Math.floor(item.Quantity * 10000) / 100
    return item
  })
}

const loadGdzt = async () => {
  const { data } = await getProductionGdzt()
  gdztData.value = data
}

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++
    }, 100)
  })
}

onMounted(async () => {
  await loadGdjd()
  await loadBgjd()
  await loadGdzt()
})

onMounted(() => {
  window.addEventListener('resize', keyResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', keyResize)
})
</script>

<template>
  <div class="ps_w_h_100 productionBoard11">
    <dv-border-box10 :key="key">
      <div class="productionBoard11-content ps_h_100">
        <!-- 左侧控件容器 -->
        <div class="left ps_h_100">
          <dv-border-box7 :color="['#196888', '#20b4bb']">
            <div class="item" v-for="(item, index) in gdjdData" :key="index">
              <div>
                <div class="item-title">{{ item.db }}</div>
                <div class="item-value" :style="{ color: color[index] }">
                  {{ formatMoney(null, item.Quantity) }}
                </div>
              </div>
            </div>
          </dv-border-box7>
        </div>

        <!-- 中间控件的容器 -->
        <div class="center ps_h_100">
          <div class="center-list ps_h_100" v-for="(item, index) in gdztData" :key="index">
            <dv-border-box7 :color="['#196888', '#20b4bb']">
              <div class="center-list-item ps_h_100">
                <div class="item-title">{{ item.db }}</div>
                <div class="item-value" :style="{ color: color[4] }">
                  {{ formatMoney(null, item.Quantity) }}
                </div>
              </div>
            </dv-border-box7>
          </div>
        </div>

        <!-- 左侧控件容器 -->
        <div class="right ps_h_100">
          <dv-border-box7 :color="['#196888', '#20b4bb']">
            <div class="item" v-for="(item, index) in bgjdData" :key="index">
              <div>
                <div class="item-title">{{ item.db }}</div>
                <div class="item-value" :style="{ color: color[index] }">
                  <span v-if="item.db === '今日不良品率'">{{ item.Quantity }} %</span>

                  <span v-else>
                    {{ formatMoney(null, item.Quantity) }}
                  </span>
                </div>
              </div>
            </div>
          </dv-border-box7>
        </div>
      </div>
    </dv-border-box10>
  </div>
</template>

<style scoped lang="scss">
.productionBoard11 {
  background-image: url('@/assets/gif/iamge03.gif');
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 40%;
  height: 100%;
  &-content {
    padding: 12px;
    display: flex;
    justify-content: space-between;

    .left,
    .right {
      width: 24%;
      color: #fff;
    }

    /* 左边和右边的盒子用这个样式 */
    .item {
      padding: 5px;
      height: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      border-bottom: 1px solid #2b2c33;
    }

    .item-title {
      color: #bebebe;
      font-size: 14px;
    }

    .item-value {
      font-size: 20px;
    }

    .center-list {
      width: 100%;
      height: 30%;
      display: flex;

      .center-list-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }

    .center {
      width: 50%;
      display: flex;
      justify-content: space-around;
    }

    .center-item {
      width: 45%;
      height: 30%;
    }
  }
}

:deep(.el-statistic) {
  .el-statistic__content,
  .el-statistic__head {
    color: #fff;
  }
}
</style>
